<template>
  <section class="_m-2">
    <div class="d-flex">
      <div class="cover-head-img">
        <img class="cover-img" v-lazy="booksVo.booksCover" alt="booksVo.booksName">
      </div>
      <div class="cover-head-info d-flex flex-direction-column justify-content-around">
        <h1>{{booksVo.booksName}}</h1>
        <p class="author">{{booksVo.author}}</p>
        <p class="classify">
          <span>{{booksVo.parentSortVo.sortName}}</span>
          <span>{{booksVo.readerSex == blockType.man ? '男生' : '女生'}}</span>
        </p>
        <p>{{booksVo.isOver == isOver.Over ? '完结' : '连载'}}</p>
      </div>
    </div>
    <div class="btn-group d-flex">
      <button class="btn btn-default flex-1" @click="addShelf" :disabled="isShelf">
        {{text}}
      </button>
      <router-link :to="'/books/reader/' + booksVo.id + '/' + booksVo.chapterId" class="btn btn-primary flex-1">
        立即阅读
      </router-link>
    </div>
  </section>
</template>

<script>
import {config} from 'assets/js/data'
import {saveBooksToShelf} from 'api/BooksShelfApi'

export default {
  name: 'SelectionHead',
  props: {
    booksVo: Object
  },
  data () {
    return {
      isOver: config.isOver,
      blockType: config.blockType,
      isShelf: this.booksVo.addToShelf,
      text: this.isShelf ? '已加入' : '加入书架'
    }
  },
  methods: {
    addShelf () {
      saveBooksToShelf({
        bookId: this.booksVo.id
      }).then(res => {
        if(res.meta.success) {
          this.isShelf = true
          this.text = "已加入"
        }
      });
    }
  },
  watch : {
    booksVo (newBooksVo) {
      this.isShelf = newBooksVo.addToShelf
      this.text = this.isShelf ? '已加入' : '加入书架'
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~assets/css/style.styl'
  section {
    height 44vw 
    background #FFF
    overflow hidden
    padding 10px

    .cover-head-img {
      height 34vw 
      width 26vw
      margin-right 14px

      .cover-img {
        width 100%
        height 100%
      }
    }

    .cover-head-info {
      font-size: 14px;
      color #999
      overflow: hidden;

      h1 {
        font-size 18px
        color #333
        ellipsis()
      }
      .classify {
        span {
          margin-right 10px
        }
      }
    }

    .btn-group {
      height: 8vw
      margin 2vw 0 0

      .btn  {
        margin-right 10px
        line-height: 8vw;
        padding: 0 10px;
        border: 1px solid #ddd;
        border-radius: 3px;
        font-size: 16px;
        color: #565656;
        text-align: center;
        font-size 14px

        &.btn-primary {
          background $colorPrimary
          color #FFF
          border none
        }
        &.btn-default {
          background #FFF
          font-size 14px
        }
      }
    }
  }
</style>
